﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>图形交互编辑（几何信息）</title>
        <link href="../../libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="../../libs/ol/ol.js" type="text/javascript"></script>
<!--    <script src="../../libs/ol/ol-debug.js" type="text/javascript"></script>-->
    <!--  引入第三方插件库 -->
    <script src="../../libs/jquery-1.11.2.min.js" type="text/javascript"></script>
    <style type="text/css">
        body,html,div,ul,li,iframe,p,img{
            border:none;padding:0;margin:0;
        }
        #map{
            width:100%;
            height:570px;
        }
        #menu{
            width:100%;
            height:20px;         
            padding:5px 10px;
            font-size:14px;
            font-family:"微软雅黑";
            left:10px;    
        }
    </style>
</head>
<body>
    <div id="menu">
        <label>移动几何图形：先用鼠标选择需移动的几何图形，选中后按住鼠标左键进行移动</label>
    </div>
    <div id="map" > 
    </div>
    <script type="text/javascript">
        /**
        * Define a namespace for the application.
        */
        window.app = {};
        var app = window.app;

        /**
        * 扩展的拖动控件的构造函数
        * @extends {ol.interaction.Pointer}
        */
        app.Drag = function () {
            ol.interaction.Pointer.call(this, {
                handleDownEvent: app.Drag.prototype.handleDownEvent,
                handleDragEvent: app.Drag.prototype.handleDragEvent,
                handleMoveEvent: app.Drag.prototype.handleMoveEvent,
                handleUpEvent: app.Drag.prototype.handleUpEvent
            });
            /**
            * @type {ol.Pixel}
            * @private
            */
            this.coordinate_ = null;

            /**
            * @type {string|undefined}
            * @private
            */
            this.cursor_ = 'pointer';

            /**
            * @type {ol.Feature}
            * @private
            */
            this.feature_ = null;

            /**
            * @type {string|undefined}
            * @private
            */
            this.previousCursor_ = undefined;

        };
        ol.inherits(app.Drag, ol.interaction.Pointer);


        /**
        * 地图容器的鼠标按下事件（Down）
        * @param {ol.MapBrowserEvent} evt Map browser event.
        * @return {boolean} `true` to start the drag sequence.
        */
        app.Drag.prototype.handleDownEvent = function (evt) {
            var map = evt.map;

            var feature = map.forEachFeatureAtPixel(evt.pixel,
              function (feature, layer) {
                  return feature;
              });

            if (feature) {
                this.coordinate_ = evt.coordinate;
                this.feature_ = feature;
            }

            return !!feature;
        };
        /**
        * 地图容器的鼠标拖拽事件（Drag）
        * @param {ol.MapBrowserEvent} evt Map browser event.
        */
        app.Drag.prototype.handleDragEvent = function (evt) {
            var map = evt.map;

            var feature = map.forEachFeatureAtPixel(evt.pixel,
                  function (feature, layer) {
                      return feature;
                  });

            var deltaX = evt.coordinate[0] - this.coordinate_[0];
            var deltaY = evt.coordinate[1] - this.coordinate_[1];

            var geometry = /** @type {ol.geom.SimpleGeometry} */
                (this.feature_.getGeometry());
            geometry.translate(deltaX, deltaY);

            this.coordinate_[0] = evt.coordinate[0];
            this.coordinate_[1] = evt.coordinate[1];
        };
        /**
        * 地图容器的鼠标移动事件（Move）
        * @param {ol.MapBrowserEvent} evt Event.
        */
        app.Drag.prototype.handleMoveEvent = function (evt) {
            if (this.cursor_) {
                var map = evt.map;
                var feature = map.forEachFeatureAtPixel(evt.pixel,
                    function (feature, layer) {
                        return feature;
                    });
                var element = evt.map.getTargetElement();
                if (feature) {
                    if (element.style.cursor != this.cursor_) {
                        this.previousCursor_ = element.style.cursor;
                        element.style.cursor = this.cursor_;
                    }
                } else if (this.previousCursor_ !== undefined) {
                    element.style.cursor = this.previousCursor_;
                    this.previousCursor_ = undefined;
                }
            }
        };
        /**
        * 地图容器的鼠标弹起事件（Up）
        * @param {ol.MapBrowserEvent} evt Map browser event.
        * @return {boolean} `false` to stop the drag sequence.
        */
        app.Drag.prototype.handleUpEvent = function (evt) {
            this.coordinate_ = null;
            this.feature_ = null;
            return false;
        };

        //实例化Map对象加载地图,默认底图加载MapQuest地图
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.MapQuest({ layer: 'sat' })
                })
            ],
            target: 'map', //地图容器div的ID
            view: new ol.View({
                center: [0, 0], //地图初始中心点
                minZoom: 2,
                zoom: 3
            })
        });

        //绘制的几何图形要素
        var pointFeature = new ol.Feature(new ol.geom.Point([0, 0]));
        var lineFeature = new ol.Feature(
            new ol.geom.LineString([[-1e7, 1e6], [-1e6, 3e6]]));
        var polygonFeature = new ol.Feature(
            new ol.geom.Polygon([[[-3e6, -1e6], [-3e6, 1e6],
                [-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6]]]));

        //实例化一个矢量图层Vector作为绘制层
        var source = new ol.source.Vector({ 
            features: [pointFeature, lineFeature, polygonFeature]
        });
        var vector = new ol.layer.Vector({
            source: source,
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new ol.style.Stroke({
                    color: '#ffcc33',
                    width: 2
                }),
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })
            })
        });
        map.addLayer(vector); //将绘制层添加到地图容器中

       //实例化交互选择控件，并添加到地图容器中
       var  singleSelect = new ol.interaction.Select();
       map.addInteraction(singleSelect);
       //实例化扩展的移动要素控件，并添加到地图容器中
       var drag = new app.Drag();
       map.addInteraction(drag);

//       singleSelect.on('select', function (e) {
//           //实例化扩展的移动要素控件，并添加到地图容器中
//           var drag;

//       });
//        singleSelect.select(e){
//            var drag = new app.Drag();
//            map.addInteraction(drag);
//        };
            
 

//       //实例化扩展的移动要素控件，并添加到地图容器中
//       var drag;
//       var features = select.getFeatures();  //选中的要素
//       if (features != null || features != undefined) {
//           drag = new app.Drag();
//           map.addInteraction(drag);
//       }
//       else {
//           map.removeInteraction(drag);
//           drag = null;
//       }


   
    </script>
</body>
</html>
